<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>散点图2</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style>
			.el-table--enable-row-hover .el-table__body tr:hover>td,
			.el-table__body tr.hover-row>td{background-color: white!important;}
		</style>
	</head>

	<body>
		<div id="app">
			<el-table :data="tableData3" :span-method="objectSpanMethod" height="500">
				<el-table-column label="" prop="keyname" width="40" fixed>
				</el-table-column>
				<el-table-column prop="date" label="" width="120" >
				</el-table-column>
				<el-table-column label="次分析维度2">
					<el-table-column v-for="(col,index) in cols" :key="col.id" :label="col.name">
							<template slot-scope="scope">
								<graph-component :row='scope.row.children[index]'></graph-component>
							</template>
					</el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<script>
			Vue.component('graph-component', {
				props:['row'],
				template: '<div :id="\'myChart\' + row.id" style="width:100%;height:300px"></div>',
				data:function(){
					return {
						legend:[]
					}
				},
				mounted:function() {
					this.row.data.forEach(hang=>{
						this.legend.push(hang.name);
					})
					let myChart = echarts.init(document.getElementById('myChart'+this.row.id));
					let option={
						title: {
							//text: '有功功率关系曲线图'
						},
						grid:{
							left:'13%'
						},
						tooltip: {
							// trigger: 'axis',
							showDelay: 0,
							formatter: function(params) {
								if (params.value.length > 1) {
									return params.seriesName + ' :<br/>' +
										params.value[0] + 'cm ' +
										params.value[1] + 'kg ';
								} else {
									return params.seriesName + ' :<br/>' +
										params.name + ' : ' +
										params.value + 'kg ';
								}
							},
							axisPointer: {
								show: true,
								type: 'cross',
								lineStyle: {
									type: 'dashed',
									width: 1
								}
							}
						},
						toolbox: {
							// 									feature: {
							// 											dataZoom: {},
							// 											brush: {
							// 													type: ['rect', 'polygon', 'clear']
							// 											}
							// 									}
						},
						legend: {
							data: this.legend,
							left: 'center'
						},
						xAxis: [{
							type: 'value',
							scale: true,
							name: '风速[m/s]',
							nameLocation: 'center',
							nameGap: 30,
							boundaryGap: false,
							// 											axisLabel : {
							// 													formatter: '{value} cm'
							// 											},
							// 											splitLine: {
							// 													show: false
							// 											}
						}],
						yAxis: [{
							type: 'value',
							scale: true,
							name: '有功功率[k值]',
							nameLocation: 'center',
							nameGap: 30,
							boundaryGap: false,
							// 											axisLabel : {
							// 													formatter: '{value} kg'
							// 											},
							// 											splitLine: {
							// 													show: false
							// 											}
						}],
						series:this.row.data
					}
					myChart.setOption(option)
				}
			})
			new Vue({
				el: '#app',
				data: function() {
					return {
						cols:[{
							id:1,name:'穿山 1#'
						},
						{
							id:2,name:'穿山 2#'
						}],
						tableData3: [{
							id:1,
							keyname: '次分析维度1',
							date: '2016-05-03',
							children:[
								{
									id:'a1',
									data:[
										{
											name:'330°-30°',
											type:'scatter',
											data:[[161.2, 51.6], [167.5, 59.0]]
										},
										{
											name:'30°-60°',
											type:'scatter',
											data:[[159.5, 49.2], [157.0, 63.0]]
										},
									],
								},
								{
									id:'a2',
									data:[
										{
											name:'330°-30°',
											type:'scatter',
											data:[[155.8, 53.6],[170.0, 59.0]]
										},
										{
											name:'30°-60°',
											type:'scatter',
											data:[[159.1, 47.6], [166.0, 69.8]]
										},
									],
								}
							]
						}, {
							id:2,
							keyname: '次分析维度1',
							date: '2016-05-03',
							children:[
								{
									id:'a3',
									data:[
										{
											name:'330°-30°',
											type:'scatter',
											data:[[180.3, 73.2],[167.6, 76.3]]
										},
										{
											name:'30°-60°',
											type:'scatter',
											data:[[183.0, 65.9],[183.0, 90.9]]
										},
									],
								},
								{
									id:'a4',
									data:[
										{
											name:'330°-30°',
											type:'scatter',
											data:[[179.1, 89.1],[170.2, 62.3]]
										},
										{
											name:'30°-60°',
											type:'scatter',
											data:[[177.8, 82.7],[179.1, 79.1]]
										},
									],
								}
							]
						}],
						spanArr: [],
						pos: '',
					}
				},
				mounted: function() {
					this.getSpanArr(this.tableData3);
				},
				methods: {
					getSpanArr(data) {
						for (var i = 0; i < data.length; i++) {
							if (i === 0) {
								this.spanArr.push(1)
								this.pos = 0
							} else {
								// 判断当前元素与上一个元素是否相同
								if (data[i].keyname === data[i - 1].keyname) {
									this.spanArr[this.pos] += 1
									this.spanArr.push(0)
								} else {
									this.spanArr.push(1)
									this.pos = i
								}
							}
						}
					},
					objectSpanMethod({
						row,
						column,
						rowIndex,
						columnIndex
					}) {
						if (columnIndex === 0) {
							const _row = this.spanArr[rowIndex];
							const _col = _row > 0 ? 1 : 0
							return {
								rowspan: _row,
								colspan: _col
							}
						}
					}
				}
			})
		</script>
	</body>

</html>
